<template>
  <div class="comminicate-form form-contain">
    <div class="comminicate-left">
      <p><span>*</span>客服电话:</p>
      <p><span>*</span>联系地址:</p>
      <p style="line-height:160px"><span>*</span>地图定位:</p>
    </div>
    <div class="comminicate-right">
      <div class="comminicate-pst">
        <!-- <el-input v-model="input" placeholder="区号" class="area-code" :max="4"></el-input> -->
        <!-- <span style="position:relative;margin-left:20px">—</span> -->
        <el-input
          v-model="input1"
          placeholder="请输入电话号码"
          class="area-code1"
          @blur="tel">
        </el-input>
      </div>
      <div class="comminicate-search">
        <el-cascader
          :options="options"
          class="comminicate-set"
          v-model="selectedOptions2"
          :props="props">
        </el-cascader>
        <el-input v-model="input2" placeholder="请输入详细地址" class="comminicate-address" @keyup.enter.native="searchMap"></el-input>
        <el-button size='small' type="info" style="margin-left:40px" @click="searchMap">搜索地图</el-button>
      </div>
    </div>
    <div style="clear: both;"></div>
    <div class="map" style="width:40%;height:300px;margin-left:23%;margin-bottom:30px;" id="allmap">

    </div>
    <el-button type='primary' style="margin-left:24%" @click="preservation" :disabled="verificationBtn">保存</el-button>
  </div>
</template>
<script>
// import { getMapLocation } from '@/utils/map'
import {ourContact, getMap} from '@/api/person'
import area from '@/utils/city.data'
export default {
  data () {
    return {
      // input: '',
      input1: null,
      input2: '',
      options: area,
      props: {
        value: 'label'
      },
      selectedOptions2: [],
      verificationBtn: false,
      longitude: null,
      latitude: null
    }
  },
  mounted () {
    this._getMap()
    this._load()
  },
  methods: {
    _getMap () {
      let _this = this
      this.$jsonp('http://api.map.baidu.com/api', {
        v: '3.0',
        ak: 'MKoGsrOBjuS4l1GxRlEikwWquRNrqZ5K'
      }, 6000).then(() => {
        var map = new BMap.Map('allmap')
        var point = new BMap.Point(116.331398, 39.897445)
        map.enableScrollWheelZoom(true)
        map.centerAndZoom(point, 12)
        var geoc = new BMap.Geocoder()
        map.addEventListener('click', function (e) {
          var pt = e.point
          map.clearOverlays()
          geoc.getLocation(pt, function (rs) {
            var point1 = new BMap.Point(rs.point.lng, rs.point.lat)
            var marker = new BMap.Marker(point1)
            _this.selectedOptions2 = [rs.addressComponents.province, rs.addressComponents.city, rs.addressComponents.district]
            _this.input2 = rs.addressComponents.street + rs.addressComponents.streetNumber
            _this.longitude = rs.point.lng
            _this.latitude = rs.point.lat
            map.addOverlay(marker)
          })
        })
      })
    },
    searchMap () {
      let _this = this
      let str = '' // 完整地址
      let str1 = '' // 省
      str = [].join.call(this.selectedOptions2, '') + this.input2
      str1 = this.selectedOptions2[0]
      if (str === '' || this.input2 === '') {
        this.$message({
          type: 'info',
          message: '请输入完整的地址'
        })
      } else {
        var map = new BMap.Map('allmap')
        var geoc = new BMap.Geocoder()
        map.enableScrollWheelZoom(true)
        geoc.getPoint(str, function (point) {
          _this.longitude = point.lng
          _this.latitude = point.lat
          if (point) {
            map.centerAndZoom(point, 16)
            map.addOverlay(new BMap.Marker(point))
            map.addEventListener('click', function (e) {
              var pt = e.point
              map.clearOverlays()
              geoc.getLocation(pt, function (rs) {
                var point1 = new BMap.Point(rs.point.lng, rs.point.lat)
                var marker = new BMap.Marker(point1)
                _this.selectedOptions2 = [rs.addressComponents.province, rs.addressComponents.city, rs.addressComponents.district]
                _this.input2 = rs.addressComponents.street + rs.addressComponents.streetNumber
                _this.longitude = rs.point.lng
                _this.latitude = rs.point.lat
                map.addOverlay(marker)
              })
            })
          } else {
            _this.$message({
              type: 'info',
              message: '您选择地址没有解析到结果'
            })
          }
        }, str1)
      }
    },
    preservation () {
      let params = {
        province: this.selectedOptions2[0],
        city: this.selectedOptions2[1],
        county: this.selectedOptions2[2],
        address: this.input2,
        longitude: this.longitude,
        latitude: this.latitude,
        service_tel: this.input1
      }
      let reg = /^[1][3,4,5,7,8][0-9]{9}$/
      let regexp = /^0\d{2,3}-\d{7,8}$/
      if (!reg.test(this.input1) && !regexp.test(this.input1)) {
        this.$message({
          type: 'info',
          message: '请输入正确的手机号码'
        })
        return false
      }
      if (this.selectedOptions2 !== '' && this.input2 !== '' && this.service_tel !== '') {
        ourContact(params).then(res => {
          if (res.code === 1) {
            this.$message({
              type: 'success',
              message: '保存成功'
            })
          } else {
            this.$message({
              type: 'info',
              message: '操作失败'
            })
          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        this.$message({
          type: 'info',
          message: '请输入完整的信息'
        })
      }
    },
    tel () {
      let reg = /^[1][3,4,5,7,8][0-9]{9}$/
      let regexp = /^0\d{2,3}-\d{7,8}$/
      if (!reg.test(this.input1) && !regexp.test(this.input1)) {
        this.$message({
          type: 'info',
          message: '请输入正确的手机号码'
        })
      }
    },
    _load () {
      getMap().then((res) => {
        if (res.code === 1) {
          this.input1 = res.data[0].service_tel
          this.input2 = res.data[0].address
          this.selectedOptions2 = [res.data[0].province, res.data[0].city, res.data[0].county]
          this.searchMap()
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="less">
.comminicate-form {
  user-select:none;
  .comminicate-left{
    float: left;
    width: 20%;
    p{
      color: #101010;
      text-align: right;
      line-height: 40px;
      span{
        color: rgb(229, 28, 35);
      }
    }
  }
  .comminicate-right{
    width: 80%;
    float: left;
    text-indent: 20px;
    padding-top: 15px;
    .comminicate-pst{
      height: 60px;
      width: 80%;
      .area-code{
        width: 10%;
      }
      .area-code1{
        width: 40%;
        text-indent: 0px;
        margin-left:20px 
      }
    }
    .comminicate-search{
      width: 50%;
      height: 120px;
      padding-left: 20px;
      .comminicate-address{
        margin-top: 20px;
        width: 65%
      }
      .comminicate-set{
        text-indent: 0
      }
    }
  }
}
</style>
